<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .datepicker {
            display: inline-block;
            position: relative;
            width: 280px;
            height: 30px;
        }

        .datepicker-box {
            width: 280px;
            height: 320px;
            position: absolute;
            left: 0;
            top: 30px;
        }

        .datepicker-box .datepicker-header {
            width: 280px;
            height: 40px;
            display: flex;
        }

        .datepicker-header .header-prev {
            flex: 1;
        }

        .datepicker-header .header-next {
            flex: 1;
        }

        .datepicker-header .header-content {
            flex: 3;
        }

        .datepicker-header div {
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: black;
            color: burlywood;
        }

        .datepicker-title {
            width: 280px;
            height: 40px;
        }

        .datepicker-title .item,
        .datepicke-content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>

    开始时间 <input id="start" />

</body>
<script>

    Date.prototype.allDays = function () {//当时间的月份有多少天
        let tempDate = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-10-31
        tempDate.setMonth(this.getMonth() + 1);//2021-11-31
        tempDate.setDate(0);//当前月的最后一天
        return tempDate.getDate();//当前月的最后一天是几号  当前月就有多少天
    }
    Date.prototype.prevDays = function () {//获取上一个月有多少天
        let tempDate = new Date("2000-01-01")//临时时间用01号
        tempDate.setFullYear(this.getFullYear());
        tempDate.setMonth(this.getMonth());//当前月的一号
        tempDate.setDate(0);
        return tempDate.getDate();
    }
    Date.prototype.firstDayWeek = function () {//当前月的第一天是星期几
        let tempDate = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth());//2021-10-01
        return tempDate.getDay();

    }
    // date.deteFormat("yyyy年mm月dd日");
    Date.prototype.deteFormat = function (str) {//自定义一个时间格式的格式刷
        let year = this.getFullYear();//年
        let month = this.getMonth() + 1;//月
        let date = this.getDate();//日

        return str.replace("yyyy", year).replace("mm", month).replace("dd", date);

    }




    $.fn.extend({
        datePicker: function () {
            let that = this;
            this.parent = $("<div class='datepicker'>");
            $(this).wrap(this.parent);
            this.datePickerBox = $(`<div class="datepicker-box">`);
            $(this).parent().append(this.datePickerBox);
            this.datePickerBox.hide();

            this.datePickerBoxHeader = $(`<div class="datepicker-header">`);
            this.datePickerBox.append(this.datePickerBoxHeader);

            this.datePickerBoxHeaderPrevBtn = $(` <div class="header-prev">上</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderPrevBtn);

            this.datePickerBoxHeaderContext = $(`<div class="header-content">2021-10</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderContext);

            this.datePickerBoxHeaderNextBtn = $(`<div class="header-next">下</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderNextBtn);

            this.datePickerBox.append(` <div class="datepicker-title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>`);
            this.datePickerBoxContent = $(`<div class="datepicke-content">`);
            this.datePickerBox.append(this.datePickerBoxContent);
            //数据
            this.date = new Date();//默认时间


            this.create = () => {

                var prevDays = this.date.prevDays();//上一个月有多少天
                var curentDays = this.date.allDays();//当前月有多少天
                var weekDays = this.date.firstDayWeek();//当前月第一天是星期几
                weekDays = weekDays == 0 ? 7 : weekDays;

                var nextDays = 42 - curentDays - weekDays + 2;

                //循环生成结构 分为三次 分别上 当 下

                this.datePickerBoxContent.html("");//清空
                for (let i = prevDays - weekDays + 2; i <= prevDays; i++) {
                    let item = $(`<div class="item">${i}</div>`);
                    this.datePickerBoxContent.append(item);
                    //生成的上一个月的时间
                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth() - 1);
                    tempDate.setDate(i);//

                    item.data("date", tempDate.deteFormat("yyyy-mm-dd"));

                }
                for (let i = 1; i <= curentDays; i++) {
                    let item = $(`<div class="item">${i}</div>`);
                    this.datePickerBoxContent.append(item);
                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth());
                    tempDate.setDate(i);//
                    item.data("date", tempDate.deteFormat("yyyy-mm-dd"));
                }
                for (let i = 1; i < nextDays; i++) {
                    let item = $(`<div class="item">${i}</div>`);
                    this.datePickerBoxContent.append(item);

                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth() + 1);
                    tempDate.setDate(i);//
                    item.data("date", tempDate.deteFormat("yyyy-mm-dd"));
                }

       
                $(this).click((e) => {//文本框事件
                    e.stopPropagation();
                    this.datePickerBox.show();
                })

                $(document).click(function (e) { //页面事件
                    e.stopPropagation();
                    that.datePickerBox.hide();
                })

                $(document).on("click", ".item", function () {//点击赋值
                    $(that).val($(this).data("date"))
                    // alert();
                })
            }

            this.create();


            //这里绑定事件
            this.datePickerBoxHeaderNextBtn.click((e)=>{//下一页的时间
                // console.log(that);
                e.stopPropagation();
                that.date.setMonth(that.date.getMonth()+1);
                that.create();
                that.datePickerBoxHeaderContext.html(that.date.deteFormat("yyyy年mm月"))

            })

            this.datePickerBoxHeaderPrevBtn.click((e)=>{//下一页的时间
                // console.log(that);
                e.stopPropagation();
                that.date.setMonth(that.date.getMonth()-1);
                that.create();
                that.datePickerBoxHeaderContext.html(that.date.deteFormat("yyyy年mm月"))

            })


        }
    })


    $("#start").datePicker();



</script>

</html>